<template>
  <!--  登陆表单容器-->
  <div class="login_container">
    <div class="login_box">
      <!--        头像-->
      <div class="avatar_box">
        <img src="../../assets/img/login.jpg"
             alt="">
      </div>
      <!--表单-->
      <el-form :model="loginForm"
               :rules="loginRules"
               ref="loginForm"
               label-width="0px"
               class="login_form">
        <el-form-item prop="username">
          <el-input prefix-icon="el-icon-user-solid" v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-lock" v-model="loginForm.password"></el-input>
        </el-form-item>
        <div class="verifyCode_box">
          <el-form-item prop="verifyCode">
            <el-input prefix-icon="el-icon-mobile" v-model="loginForm.verifyCode" class="verify_code"></el-input>
            <img class="verify_img" :src="captchaUrl" alt="" @click="updateCaptcha">
          </el-form-item>
        </div>
        <el-form-item class="login_btn">
          <el-button type="primary"
                     @click="submitForm('loginForm')">立即登录
          </el-button>
          <el-button @click="reForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 滑动验证码 -->
      <Vcode
        :show="isShowVcode"
        @success="success"
        @close="close"
        :canvasWidth="500"
        :canvasHeight="250"
      />
    </div>
  </div>
</template>

<script>

  import Vcode from 'vue-puzzle-vcode'
  import { login, loginInfo } from '../../api/system/login'

  export default {
    name: 'Login',
    components: {
      Vcode
    },
    data () {
      return {
        isShowVcode: false,
        captchaUrl: '/api/captcha?time=' + new Date(),
        tokenStr: '',
        loginUser: '',
        loginForm: {
          username: 'yifei',
          password: '123456',
          verifyCode: ''
        },
        loginRules: {
          username: [
            {
              required: true,
              message: '请输入用户名',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 16,
              message: '长度在 3 到 16 个字符',
              trigger: 'blur'
            }
          ],
          password: [
            {
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 16,
              message: '长度在 6 到 16 个字符',
              trigger: 'blur'
            }],
          verifyCode: [{
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }]
        }
      }
    },
    created () {
    },

    mounted () {
      //重新登陆时防止回退之前页面
      window.sessionStorage.clear()
      history.pushState(null, null, document.URL)
      window.addEventListener(
        'popstate',
        function () {
          history.pushState(null, null, document.URL)
        },
        false
      )
    },
    methods: {

      //刷新验证码
      updateCaptcha () {
        this.captchaUrl = '/api/captcha?time=' + new Date()
      },

      //表单验证通过
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //this.isShowVcode = true
            this.success()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      //重置表单
      reForm (formName) {
        this.$refs[formName].resetFields()
        this.updateCaptcha()
      },

      //验证码通过
      async success () {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        //登陆返回token
        login(this.loginForm).then(res => {
          if (res) {
            this.tokenStr = res.data.data.tokenMap.tokenHead + res.data.data.tokenMap.token
            window.sessionStorage.setItem('tokenStr', this.tokenStr)
            //获取用户信息
            loginInfo().then(resp => {
              if (resp) {
                this.loginUser = resp.data.data.user
                this.$store.commit('setUserInfo', resp.data.data.user)
                //this.$session.set('loginUser', JSON.stringify(this.loginUser))
                this.$router.replace('/home')
                loading.close()
              } else {
                loading.close()
                this.updateCaptcha()
              }
            })
          } else {
            loading.close()
          /*  setTimeout(() => {
              this.msgError('登陆超时')
              loading.close()
            }, 5000)*/
            this.isShowVcode = false
            this.updateCaptcha()
          }
        })
      },

      //关闭滑动验证码
      close () {
        this.isShowVcode = false
        this.updateCaptcha()
      }
    }
  }
</script>

<style lang="less" scoped>
  .login_container {
    height: 100%;
    background-color: aqua;
  }

  .login_box {
    width: 400px;
    height: 400px;
    background: #ffffff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .avatar_box {
      width: 130px;
      height: 130px;
      border: 5px solid #eeeeee;
      border-radius: 50%;
      pading: 10px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin: -65px auto;
      background-color: #ffffff;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eeeeee;

      }
    }

    .login_form {
      position: absolute;
      bottom: 60px;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;

      .login_btn {
        display: flex;
        justify-content: center;
      }

      .verifyCode_box {
        display: flex;

        .verify_code {
          width: 65%;
          justify-content: left;
        }

        .verify_img {
          width: 35%;
          height: 40px;
          margin-bottom: -15px;
          justify-content: flex-end;
        }
      }
    }
  }

</style>
